<template>
	<view class="bf u-p-t-20">
		<!-- 头部组件 -->
		<LocationHeader @getSearchLeader="getSearchLeader" :searchKeyword.sync="searchKeyword"></LocationHeader>
		<!-- 可选择提货点组件 -->
		<view class="u-m-t-20 bf-current-location-container">
			<PickUpLocationItem :location="leaderAddressVo" :isCurrent="checkIsCurrent(leaderAddressVo.leaderId)"></PickUpLocationItem>
		</view>
		<!-- 选择城市所有的提货点列表 -->
		<scroll-view scroll-y class="bf-location-sv-container"  @scrolltolower="loadMore">
			<block v-if="searchResult.content.length>0">
				<view class="u-m-b-20" v-for="item in searchResult.content" :key="item.id">
					<PickUpLocationItem :location="item"  
					:isCurrent="checkIsCurrent(item.id)"
					@selectPickUpLocation="selectPickUpLocation"
					></PickUpLocationItem>
				</view>
			</block>
			<u-empty v-else mode="list"></u-empty>
		</scroll-view>
		<u-button @click="chooseOtherLocation" type="warning">搜索选择其他提货点</u-button>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapActions
	} from "vuex"
	export default {
		data() {
			return {
				searchKeyword: "", //通过sync修饰符 父子间通信该数据
				filter: {
					page: 1, // 当前页码
					limit: 5, // 每页记录数
					latitude: '', // 经度
					longitude: '', // 纬度
				},
				searchResult: {
					content: [], // 搜索的结果
					last: false, // 是否已经最后
				},
			};
		},
		computed: {
			// 从仓库获取当前提货点信息
			...mapState("pickUpLocationModule", ["leaderAddressVo"]),
			// 从getters获取当前选择的提货点
			...mapGetters("pickUpLocationModule",["checkIsCurrent"])
		},
		methods: {
			 ...mapActions('pickUpLocationModule', ['selectLeaderAddressVoAction']),
			//获取对应经纬度城市的所有提货点
			async getSearchLeader(data) {
				if(data){
					// 重置一下searchReasult和filter的数据(否则获取的还是之前的区域？)
					Object.assign(this.$data.searchResult,this.$options.data().searchResult)
					Object.assign(this.$data.filter,this.$options.data().filter)
				}
				//如果有经纬度 覆盖filter 否则还是原来的filter 防止下拉加载的时候找不到对应的经纬度
				this.filter.latitude = data?data.latitude:this.filter.latitude
				this.filter.longitude = data?data.longitude:this.filter.longitude
				//封装要用来请求的对象
				const o = {
					...this.filter
				};
				//console.log(o)
				let res = await this.$u.api.getSearchLeader(o)
				this.searchResult ={
					...res,
					//追加合并数据
					content:[...this.searchResult.content,...res.content]
				}
			},
			//加载更多数据
			 loadMore(){
				 if(!this.searchResult.last){
					 //如果不是最后页的数据，页数加一，重新发送请求
					 this.filter.page +=1
					 this.getSearchLeader()//这种情况就是经纬度和之前一样了
				 }
			 },
			 //选择提货点 是自定义事件
			 selectPickUpLocation(leaderId){
				 // console.log(leaderId);
				  if(leaderId) this.selectLeaderAddressVoAction({leaderId})
			 },
			 // 选择其他提货点
			 chooseOtherLocation(){
				 this.$u.route("/pagesLocation/ChooseOtherLocation/ChooseOtherLocation")
			 }
		}
	}
</script>

<style lang="scss" scoped>
	.bf {
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	  height: 100%;
	
	  &-current-location-container {
	    flex: 1;
	  }
	
	  &-location-sv-container {
	    height: calc(100vh - 450rpx);
	  }
	}
</style>
